<template>
<div class="tab-wrapper">
    <div @click="switchTab(item)" :class="item.key === activeKey ? 'active tab': 'tab'" v-for="(item, index) in tabs" :key="index">
    {{ item.name }}
</div>
</div>>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Tab } from '@/types/tab.ts' 
const tabs = reactive<Tab>([
    {name:'实时发现',key:'1'},
    {name:'实时推送',key:'2'},
    {name:'实时处置',key:'3'},
])
const activeKey = ref<string>('1')
const switchTab = (item)=>{
    console.log(item.name)
} 
</script>

<style scoped lang="scss">
.tab-wrapper {
    position: absolute;
    left: 50%;
    top: 120px;
    transform: translate(-50%, -50%);
    display: flex;
    width: 700px;
    justify-content: space-around;
}
.tab {
    background: url(../../../assets/img/tab.png) no-repeat left top;
    background-size: 100% 100%;
    font-size: 22px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #499EF6;
    padding: 0px 10px 20px;
}
.active{

}
</style>
